<template>
	<div class="detail" v-if="basicInfo">
		<div class="detail-main">
			<Swipe :swipeList="pics" key="detail-swipe"/>
			<Title :basicInfo="basicInfo"/>
			<choose-version v-if="!basicInfo.kanjia" @click="layerChange" :name="properties[0].name"/>
			<ChooseTab :isComponent="isComponent" @changeTab="changeTab"/>
			<keep-alive>
				<component :is="isComponent" :content="content" :reputation="reputation"/>
			</keep-alive>
		</div>
		<bargain-footer v-if="basicInfo.kanjia&&$route.params.kjid" :minPrice="basicInfo.minPrice"
		                @click.native="initiateBargain"/>
		<Footer v-else :allCount="allCount" @click="layerChange"/>
		<layer v-show="layerComponent" @layerHide="layerHide">
			<add-cart
					:pattern="layerComponent"
					:properties="properties"
					:basicInfo="basicInfo"
					@layerHide="layerHide"
			/>
		</layer>
		<GoBack/>
	</div>
</template>

<script>
	import Goods from '@/services/goods';
	import Bargain from '@/services/bargain';
	import Swipe from '#/Public/Swipe';
	import GoBack from '#/Public/GoBack';
	import Title from '#/GoodsDetail/Title';
	import ChooseVersion from '#/GoodsDetail/ChooseVersion';
	import ChooseTab from '#/GoodsDetail/ChooseTab';
	import Evaluation from '#/GoodsDetail/Evaluation';
	import Introduce from '#/GoodsDetail/Introduce';
	import addCart from '#/GoodsDetail/addCart';
	import Footer from '#/GoodsDetail/Footer';
	import BargainFooter from '#/GoodsDetail/BargainFooter'
	import layer from '#/Public/layer';
	import {mapGetters} from 'vuex';

	const _goods = new Goods();
	const _bargain = new Bargain();
	export default {
		name: "GoodsDetail",
		data() {
			return {
				basicInfo: null,
				content: '',
				isComponent: 'introduce',
				reputation: [],
				pics: [],
				properties: [],
				// 1是加入购物车，2是立即购买，0是隐藏
				layerComponent: 0
			}
		},
		computed: {
			...mapGetters(['allCount'])
		},
		created() {
			this.getGoodsDetail();
			this.getGoodReputation();
		},
		methods: {
			// 商品详情
			getGoodsDetail() {
				let id = this.$route.params.id;
				_goods.getGoodDetail(id).then(res => {
					this.basicInfo = res.data.basicInfo;
					this.content = res.data.content;
					this.pics = res.data.pics;
					this.properties = res.data.properties;
					document.title = res.data.basicInfo.name;
				})
			},
			// 商品评价
			getGoodReputation() {
				let id = this.$route.params.id;
				_goods.getGoodReputation({id}).then(res => {
					this.reputation = res.data;
				})
			},
			changeTab(value) {
				this.isComponent = value;
			},
			layerChange(value) {
				this.layerComponent = value;
			},
			layerHide() {
				this.layerComponent = 0;
			},
			initiateBargain() {
				let kjid = this.$route.params.kjid;
				_bargain.createBargain(kjid).then(res => {
					console.log(res);
					this.$router.push({
						path: `/bargain_info/${res.data.kjId}/${res.data.uid}`
					})
				});
			}
		},
		components: {
			Swipe,
			GoBack,
			Title,
			ChooseVersion,
			ChooseTab,
			Evaluation,
			Introduce,
			addCart,
			Footer,
			BargainFooter,
			layer
		}
	}
</script>
